<template>
  <div class="container" :class="scrollTop >= 100 ? 'bg_scroll' : ''">
    <header class="w">
      <div class="title">
        <h1><a href="index.html">SQUADFREE</a></h1>
      </div>
      <nav>
        <ul class="ul">
          <li>
            <a
              href="#"
              :class="navNum === 0 ? 'active' : ''"
              @click.prevent="to()"
              >Home</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="navNum === 1 ? 'active' : ''"
              @click.prevent="to(aboutHeight)"
              >About Us</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="navNum === 2 ? 'active' : ''"
              @click.prevent="to(servicesHeight)"
              >Services</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="navNum === 3 ? 'active' : ''"
              @click.prevent="to(portfolioHeight)"
              >Portfolio</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="navNum === 4 ? 'active' : ''"
              @click.prevent="to(teamHeight)"
              >Team</a
            >
          </li>
          <li>
            <a
              href="javascript:;"
              class="box"
              @mouseover="
                () => {
                  show = true;
                }
              "
              @mouseleave="
                () => {
                  show = false;
                }
              "
              >Drop Down
              <span class="iconfont">&#xe62a;</span>
              <dropDownBox :show="show" />
            </a>
          </li>
          <li>
            <a
              href="#"
              :class="navNum === 5 ? 'active' : ''"
              @click.prevent="to(contactHeight)"
              >Contact</a
            >
          </li>
        </ul>
      </nav>
    </header>
  </div>
</template>

<script>
import dropDownBox from "./dropDownBox";
export default {
  name: "Header",
  data() {
    return {
      scrollTop: 0,
      show: false,
      navNum: 0,
      aboutHeight: 0,
      servicesHeight: 0,
      portfolioHeight: 0,
      teamHeight: 0,
      contactHeight: 0,
    };
  },
  components: { dropDownBox },
  mounted() {
    // console.log(document.getElementById('home').offsetHeight);
      this.getHeight()      

    this.$nextTick(function () {
      window.addEventListener("scroll", this.handleScroll);
    });
    setTimeout(() => {
       //因为offsetTop可能会因为前面图片没有加载,出现偏差,
    }, 1000);
  },
  methods: {
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //获取滚动距离
      this.scrollTop = scrollTop; //data里return了一个全局的scrollTop
      this.getHeight()      

    },
    //获取标签相对于页面顶部的距离
    getHeight() {
      this.aboutHeight = document.getElementById("about").offsetTop - 66;
      this.servicesHeight = document.getElementById("services").offsetTop - 66;
      this.portfolioHeight =
        document.getElementById("portfolio").offsetTop - 66;
      this.teamHeight = document.getElementById("team").offsetTop - 66;
      this.contactHeight = document.getElementById("contact").offsetTop - 66;
    },
    to(height = 0) {
      window.scrollTo({
        top: height,
        behavior: "smooth",
      });
    },
    navChange() {
      if (
        this.scrollTop > this.aboutHeight - 100 &&
        this.scrollTop < this.servicesHeight - 100
      ) {
        this.navNum = 1;
      } else if (
        this.scrollTop > this.servicesHeight - 100 &&
        this.scrollTop < this.portfolioHeight - 100
      ) {
        this.navNum = 2;
      } else if (
        this.scrollTop > this.portfolioHeight - 100 &&
        this.scrollTop < this.teamHeight - 100
      ) {
        this.navNum = 3;
      } else if (
        this.scrollTop > this.teamHeight - 100 &&
        this.scrollTop < this.contactHeight - 100
      ) {
        this.navNum = 4;
      } else if (this.scrollTop > this.contactHeight - 100) {
        this.navNum = 5;
      } else {
        this.navNum = 0;
      }
    },
  },
  watch: {
    scrollTop: function () {
      this.navChange();
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
}
.container {
  box-sizing: border-box;
  position: fixed;
  float: left;
  top: 0;
  height: 88px;
  width: 100%;
  transition: all 0.5s;
  z-index: 1000;
  header {
    height: 100%;
    display: flex;

    a {
      color: #fff;
    }
    .title {
      justify-content: flex-start;
      display: flex;
      align-items: center;
      flex: 1;
      h1 {
        font-size: 24px;
      }
    }
    nav {
      justify-content: flex-end;
      display: flex;
      align-items: center;

      .ul li {
        float: left;
        margin-left: 10px;
        a {
          display: inline-block;
          height: 100%;
          padding: 10px 15px;
          font-size: 16px;
          font-weight: bold;
          &:hover {
            color: #0a58ca;
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
  }
}
.active {
  background: rgba(255, 255, 255, 0.2);
}
.header-scrolled {
  background: rgba(55, 142, 181, 0.9);
  padding: 12px;
}
.bg_scroll {
  background: rgba(55, 142, 181, 0.9);
  height: 64px;
  padding: 10px 12px;
}
</style>